<template>
    <div class="home-container">
      <!-- 导航栏 -->
      <van-nav-bar  class="page-nav-bar" fixed>
         <van-button 
          class="search-btn"
          slot="title"
          size="small"
          icon="search" 
          round
         >搜索</van-button>
      </van-nav-bar>
     <!-- 频道列表 -->
     <van-tabs class="channel-tabs" v-model="active" animated swipeable border>
         <van-tab  :title="channel.name"
          v-for="channel in channels"
          :key="channel.id"
            > 

          <!-- 文章列表 -->
           <article-list :channel="channel"/>
          </van-tab>
         
            <!-- 汉堡按钮的占位 -->
            <div slot="nav-right" class="placeholder"></div>
           <div slot="nav-right" 
            class="hamburger-btn"
             @click="isChennelEditShow = true"
            >
                 三
           </div>
     </van-tabs>

        <!-- 频道编辑弹出层 -->

        <van-popup
            v-model="isChennelEditShow"
            closeable
            position="bottom"
            :style="{ height: '100%' }"
            close-icon-position="top-left"
         >
         <channel-edit 
         :my-channels="channels"
         :active="active"
         @addchannel="addChannel"
         ></channel-edit>
        </van-popup>


    </div>
</template>


<script>
import  { getUserChannels } from '@/api/user'
import  ArticleList from './components/article-list'
import ChannelEdit from './components/channel-edit.vue'

   export default {
      name: 'HomeIndex',
      data() {
         return {
            active:0,
             // 频道数据
            channels:[],
            // 控制频道编辑弹出层状态
            isChennelEditShow: false,
          }
      },
      created() {
         
          this.LoadChannels()
      },
      methods: {
        async LoadChannels() {
            try {
              const { data } = await getUserChannels()
               // console.log(data);
               this.channels = data.data.channels
            } catch(err) {
                this.$toast('获取评到数据失败')
            }  
         },

         addChannel(c){
           // 接受子组件传来的channel
            this.channels.push(c)
         },

      },
      components: {
         ArticleList,
         ChannelEdit,
         
       
      }
      
   }

</script>


<style lang="less" >
     .home-container {
          padding-top: 174px;
          padding-bottom: 100px;
        .van-nav-bar__title {
             /* 去除原本有的宽度不要设置(上面style不要使用scoped) */
             max-width: unset;
         }
         .search-btn {
            width: 555px;
            height: 64px;
            background: hsl(348, 69%, 88%);
            border: none;
            color: #fff;
            font-size: 28px;
            .van-icon {
                font-size: 32px;
             }
       }
        
          .channel-tabs {
             .van-tabs__wrap {
                  position: fixed;
                  top:92px;
                  z-index: 1;
                  left: 0;
                  right: 0;
                  height:82px;
              } 
              .van-tab {
                min-width: 200px;
                border-right: 1px solid #eee;
                font-size: 30px;
                color: #777;
            }
            .van-tab--active {
                color: #333
            }
            .van-tabs__nav {
                padding-bottom: 0;
             }
            .van-tabs__line {
                 bottom: 8px;
                 width: 31px;
                 height: 6px;
                 background-color: pink;
            }
              .placeholder {
               //父元素flex布局 子元素不参与空间布局
                flex-shrink: 0;
                width: 66px;
                height: 82px;

              }
            .hamburger-btn {
                position: fixed;
                right: 0;
                display: flex;
                justify-content: center;
                align-items: center;
                width: 66px;
                height: 82px;
                background-color: #fff;
                opacity: 0.9;
                font-size: 30px;
                font-weight: bolder;

            }
        }
     }
</style>